<template>
  <div>
    <el-row>
      <el-col :span="7">
        <div class="box">
          <el-scrollbar style="height: 100%">
            <basic-container>
              <el-tree
                :data="treeData"
                @node-click="handleNodeClick"
                :load="loadNode"
                lazy
                ref="crud"
                :highlight-current="true"
                node-key="id"
                :default-expanded-keys="expandedKeys"
              >
                <template #default="{ node }">
                  <div class="flex align-center border">
                    <el-icon v-if="node.level == 1" class="mr5"><Flag /></el-icon>
                    <el-icon v-if="node.level == 2" class="mr5"><Stamp /></el-icon>
                    <el-icon v-if="node.level == 3" class="mr5"><WalletFilled /></el-icon>
                    <el-icon v-if="node.level == 4" class="mr5"><GoodsFilled /></el-icon>
                    <el-icon v-if="node.level == 5" class="mr5"><Briefcase /></el-icon>
                    <span>{{ node.label }}</span>
                  </div>
                </template>
              </el-tree>
            </basic-container>
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="17">
        <TeamList
          v-if="currentNode.level == 0"
          @refresh="handleRefresh"
          :currentNode="currentNode"
          :treeData="treeData"
        />
        <Team
          v-else-if="currentNode.level == 1"
          @refresh="handleRefresh"
          :currentNode="currentNode"
          :treeData="treeData"
        />
        <Sequence
          v-else-if="currentNode.level == 2"
          @refresh="handleRefresh"
          :currentNode="currentNode"
          :treeData="treeData"
        />
        <PositionSequence
          v-else-if="currentNode.level == 3"
          @refresh="handleRefresh"
          :currentNode="currentNode"
          :treeData="treeData"
        />
        <Position
          v-else-if="currentNode.level == 4"
          @refresh="handleRefresh"
          :currentNode="currentNode"
          :treeData="treeData"
        />
        <Direction
          v-else-if="currentNode.level == 5"
          @refresh="handleRefresh"
          :currentNode="currentNode"
          :treeData="treeData"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getTeamList, getSequenceList, getPositionSequenceList } from '@/api/position/team';
import { getList } from '@/api/position/positionInstance';
import { getDirListByInstance } from '@/api/position/direction';

import Team from './components/team.vue';
import TeamList from './components/teamlist.vue';
import Sequence from './components/sequence.vue';
import PositionSequence from './components/positionSequence.vue';
import Position from './components/position.vue';
import Direction from './components/direction.vue';

export default {
  components: {
    Team,
    TeamList,
    Sequence,
    PositionSequence,
    Position,
    Direction,
  },
  data() {
    return {
      currentNode: {},
      treeData: [],
      expandedKeys: [],
    };
  },
  methods: {
    handleRefresh() {
      this.getTeamList();
      let treeData = [],
        team = {},
        sequence = {},
        positionSequence = {},
        position = {};
      this.expandedKeys.forEach(async (id, index) => {
        if (index == 0) {
          const res = await getTeamList();
          treeData = res.data.data.map(item => {
            return {
              id: item.id,
              label: item.name,
              isLeaf: false,
              sort: item.sort,
              children: [],
            };
          });
        } else if (index == 1) {
          team = treeData.find(item => item.id == id);
          if (team) {
            const res = await getSequenceList(id);
            team['children'] = res.data.data.map(item => {
              return {
                id: item.id,
                label: item.name,
                isLeaf: false,
                sort: item.sort,
                children: [],
              };
            });
          }
        } else if (index == 2 && team && team['children']) {
          sequence = team['children'].find(item => item.id == id);
          if (sequence) {
            const res = await getPositionSequenceList(id);
            sequence['children'] = res.data.data.map(item => {
              return {
                id: item.id,
                label: item.name,
                isLeaf: false,
                sort: item.sort,
                children: [],
              };
            });
          }
        } else if (index == 3 && sequence && sequence['children']) {
          positionSequence = sequence['children'].find(item => item.id == id);
          if (positionSequence) {
            const res = await getList(id);
            if (res.data.data.records) {
              positionSequence['children'] = res.data.data.records
                .map(item => ({
                  id: item.id,
                  label: item.position.name,
                  isLeaf: false,
                  parentId: item.position.id,
                  sort: item.sort,
                  children: [],
                }))
                .sort((a, b) => a.sort - b.sort);
            }
          }
        } else if (index == 4 && positionSequence && positionSequence['children']) {
          position = positionSequence['children'].find(item => item.id == id);
          if (position) {
            const res = await getDirListByInstance(id);
            position['children'] = res.data.data.records.map(item => {
              return {
                id: item.id,
                label: item.position.name,
                isLeaf: false,
                children: [],
              };
            });
          }
        }
      });
      this.treeData = treeData;
    },
    securityLabel(security) {
      let securityObj = this.website.securityLists.find(item => item.value == security);
      return securityObj ? securityObj.label : security;
    },
    // 加载叶子节点
    async loadNode(node, resolve) {
      this.currentNode = node;
      if (node.level == 0) {
        return this.getTeamList(resolve);
      } else if (node.level == 1) {
        return this.getSequenceList(resolve, node.data.id);
      } else if (node.level == 2) {
        return this.getPositionSequenceList(resolve, node.data.id);
      } else if (node.level == 3) {
        return this.getPositionList(resolve, node.data.id);
      } else if (node.level == 4) {
        return this.getDirectionLists(resolve, node.data.parentId);
      } else if (node.level == 5) {
        return resolve([]);
      }
    },
    // 点击节点
    async handleNodeClick(data, node) {
      this.currentNode = node;
      console.log(node.data.id);
      let idsArr = [];
      function getId(node) {
        if (node.data.id) {
          idsArr.unshift(node.data.id);
        }
        if (node.parent) {
          getId(node.parent);
        }
      }
      getId(node);
      this.expandedKeys = idsArr;
    },
    // 获取队伍列表
    async getTeamList(resolve) {
      const res = await getTeamList();
      this.teamData = {};
      const { code, data, msg } = res.data;
      if (code == 200) {
        const treeData = data.map(item => {
          return {
            id: item.id,
            label: item.name,
            isLeaf: false,
            sort: item.sort,
          };
        });
        this.treeData = treeData;
        return resolve && resolve(treeData);
      } else {
        this.$message.error(msg);
      }
    },
    // 获取序列列表
    async getSequenceList(resolve, id) {
      const res = await getSequenceList(id);
      const { code, data, msg } = res.data;
      if (code == 200) {
        const child = data.map(item => {
          return {
            id: item.id,
            label: item.name,
            isLeaf: false,
            sort: item.sort,
          };
        });
        return resolve(child);
      } else {
        this.$message.error(msg);
        return resolve([]);
      }
    },
    // 获取岗位序列列表
    async getPositionSequenceList(resolve, id) {
      const res = await getPositionSequenceList(id);
      const { code, data, msg } = res.data;
      if (code == 200) {
        return resolve(
          data.map(item => {
            return {
              id: item.id,
              label: item.name,
              isLeaf: false,
              sort: item.sort,
            };
          })
        );
      } else {
        this.$message.error(msg);
        return resolve([]);
      }
    },
    // 获取岗位实例
    async getPositionList(resolve, id) {
      const res = await getList(id);
      if (res.data.data.records) {
        const data = res.data.data.records
          .map(item => ({
            id: item.id,
            label: item.position.name,
            isLeaf: false,
            parentId: item.id,
            sort: item.sort,
          }))
          .sort((a, b) => a.sort - b.sort);
        return resolve(data);
      }
      return resolve([]);
    },
    // 获取方向实例
    async getDirectionLists(resolve, id) {
      const res = await getDirListByInstance(id);
      const { records } = res.data.data;
      return resolve(
        records.map(item => {
          return {
            id: item.id,
            label: item.position.name,
            isLeaf: false,
          };
        })
      );
    },
  },
};
</script>

<style scoped>
.border {
  position: relative;
}
.border::after {
  position: absolute;
  content: '';
  top: 0;
  left: -13px;
  bottom: -1000px;
  border-left: 1px solid #ccc;
  z-index: 1;
}
.el-tree {
  overflow: hidden;
}
</style>
